<template>
  <div id="photo-share-list">
    <top-header title="图文分享列表" :isRoute="isRoute" />
    <!-- 图文分享类别部分 -->
    <div class="category-list">
      <div
        v-for="item in categoryList"
        :key="item.id"
        :class="item.className"
        @click="getPhotoShareListByCategoryId(item.id)"
      >{{item.title}}</div>
    </div>
    <!-- 图文分享列表数据 -->
    <div class="photo-share-list">
      <div class="photo-share-item" v-for="item in photoShareList" :key="item.id">
        <router-link :to="{name:'photo-share-detail',params:{id:item.id}}">
          <img v-lazy="item.img_url" lazy="loading" />
          <div class="photo-share-info">
            <h3 class="title">{{item.title | strLimit(18)}}</h3>
            <p class="summary">{{item.zhaiyao | strLimit(60)}}</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import "./index.less";
import { map, each } from "lodash";
export default {
  data() {
    return {
      isRoute: true,
      categoryList: [],
      photoShareList: []
    };
  },
  methods: {
    getPhotoShareListByCategoryId(id) {
      each(this.categoryList, item => {
        item.className = "";
        if (item.id === id) {
          item.className = "active";
        }
      });
      this.$axios
        .get("getimages/" + id)
        .then(res => {
          this.photoShareList = res.data.message;
        })
        .catch(err => console.log(err));
    }
  },
  created() {
    this.$axios
      .all([this.$axios.get("getimgcategory"), this.$axios.get("getimages/0")])
      .then(
        this.$axios.spread((resCategory, resPhotoShare) => {
          this.categoryList = resCategory.data.message;
          this.categoryList.unshift({
            id: "0",
            title: "全部"
          });
          map(this.categoryList, item => {
            item.className = "";
            return item;
          });
          this.categoryList[0].className = "active";
          this.photoShareList = resPhotoShare.data.message;
        })
      )
      .catch(err => console.log(err));
  }
};
</script>
